<template>
	<view>
		<!-- top -->
		<view class="top">
			<image :src="userInfo.headimg" class="top_avatar"></image>
			<view class="top_box">
				<view class="top_box_name">{{userInfo.nickname}}</view>
				<view class="top_box_mobile">
					<image src="/static/phone.png" class="top_box_mobile_img"></image>
					<view class="top_box_mobile_num">{{userInfo.mobile}}</view>
					<view class="top_box_mobile_text" @click="clickUpdata">更新</view>
				</view>
			</view>
			<!-- <view class="top_r">
				<image src="/static/copy.png" class="top_r_img"></image>
				<view class="top_r_text">发布</view>
			</view> -->
		</view>
		
		<view class="top_bg">素材库</view>
		
		<view class="box">
			<block v-for="(item,index) in menuLis" :key="index">
				<view class="boxes" @click="skip(item.menupath)">
					<image :src="item.img" class="boxes_img"></image>
					<view class="boxes_l" :style="{border: index+1==menuLis.length?'none':''}">
						<view class="boxes_l_text">{{item.menuname}}</view>
						<image src="/static/more.png" class="boxes_l_img"></image>
					</view>
				</view>
			</block>
		</view>
		
		<updataUser :userInfo="userInfo" :login="false" @success="updataSuccess" @click="hidePopup" v-if="showUserInfo"></updataUser>
		
	</view>
</template>

<script>
	import updataUser from 'components/updataUser'
	import { requestData } from 'util/request';
	export default {
		components: {
			updataUser
		},
		data() {
			return {
				userInfo: '',
				showUserInfo: false,
				menuLis: [],
			};
		},
		
		onLoad() {
			let that = this
			
			
			
			// wx.login().then((d) => {
			// 	wx.request({
			// 		url: getApp().globalData.url + '/sys/reg',
			// 		method: 'POST',
			// 		data: {
			// 			code: d.code
			// 		},
			// 		header: {
			// 			'content-type': 'application/x-www-form-urlencoded',
			// 		},
			// 		success: (res) => {
			// 			// console.log(res)
			// 			if (res.data.code == 20000) {
			// 				wx.setStorageSync('openid', res.data.data.openid)
			// 				wx.setStorageSync('token', res.data.data.token)
			// 				wx.setStorageSync('showIndex', res.data.data.flag==1?true:false)
			// 			}
			// 		},
			
			// 	})
			// });
		},
		
		onShow() {
			let that = this
			
			
			// uni.request({
			// 	url: getApp().globalData.url + '/mu/menulist',
			// 	method: 'POST',
			// 	header: {
			// 		'content-type': 'application/x-www-form-urlencoded',
			// 		token: uni.getStorageSync('token')
			// 	},
			// 	success: (res) => {
			// 		if (res.data.code == 20000) {
			// 			that.menuLis = res.data.data
			// 		}
			// 	}
			// })
			
			that.userInfoRequest()
			
			// 菜单
			requestData('/mu/menulist').then(res=>{
				that.menuLis = res.data
			})
			
		},
		
		methods: {
			// 点击更新
			clickUpdata(){
				let that = this
				
				that.showUserInfo = true
			},
			
			// 更新成功
			updataSuccess(userInfo){
				let that = this
				// 更新头像
				uni.request({
					url: getApp().globalData.url + '/sys/upheadimg',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						token: uni.getStorageSync('token')
					},
					data: {
						headimg: userInfo.headimg
					},
					success(res) {
						if(res.data.code == 20000){
							// 更新昵称
							uni.request({
								url: getApp().globalData.url + '/sys/upnickname',
								header: {
									'content-type': 'application/x-www-form-urlencoded',
									token: uni.getStorageSync('token')
								},
								data: {
									nickname: userInfo.nickname,
								},
								success(res) {
									if(res.data.code == 20000){
										that.userInfoRequest()
									}else{
										uni.showToast({
											title: res.data.msg,
											icon: 'none'
										})
									}
								}
							})
						}else{
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					}
				})
			},
			
			// 更新个人信息
			userInfoRequest(){
				let that = this
				
				requestData('/sys/getuser').then(res=>{
					that.userInfo = res.data
					that.showUserInfo = false
				})
				
				// uni.request({
				// 	url: getApp().globalData.url + '/sys/getuser',
				// 	method: 'POST',
				// 	header: {
				// 		'content-type': 'application/x-www-form-urlencoded',
				// 		token: uni.getStorageSync('token')
				// 	},
				// 	success: (res) => {
				// 		if (res.data.code == 20000) {
				// 			that.userInfo = res.data.data
				// 			that.showUserInfo = false
				// 		}
				// 	}
				// })
			},
			
			// 关闭更新
			hidePopup(){
				this.showUserInfo = false
			},
			
			// 跳转下一页
			skip(url){
				uni.navigateTo({
					url,
					complete(res) {
						if(res.errMsg == 'navigateTo:fail can not navigateTo a tabbar page'){
							uni.switchTab({
								url
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: #ECECEC;
	}
	// top
	.top{
		width: 750rpx;
		height: 240rpx;
		background: #03AEA5;
		overflow: hidden;
		
		&_avatar{
			float: left;
			margin-top: 60rpx;
			margin-left: 20rpx;
			width: 116rpx;
			height: 116rpx;
			border-radius: 50%;
		}
		&_box{
			float: left;
			margin-top: 74rpx;
			margin-left: 18rpx;
			overflow: hidden;
			
			&_name{
				height: 40rpx;
				font-family: Microsoft YaHei;
				font-weight: bold;
				font-size: 40rpx;
				color: #FFFFFF;
				line-height: 40rpx;
			}
			&_mobile{
				margin-top: 20rpx;
				height: 50rpx;
				overflow: hidden;
				
				&_img{
					float: left;
					margin-top: 7rpx;
					margin-right: 12rpx;
					width: 16rpx;
					height: 26rpx;
				}
				&_num{
					float: left;
					height: 40rpx;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #FFFFFF;
					line-height: 40rpx;
				}
				&_text{
					float: left;
					margin-left: 20rpx;
					width: 80rpx;
					height: 38rpx;
					border-radius: 4rpx;
					border: 1rpx solid #FFFFFF;
					text-align: center;
					font-family: Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 28rpx;
					color: #FFFFFF;
					line-height: 38rpx;
				}
			}
		}
		&_r{
			float: right;
			margin-top: 70rpx;
			margin-right: 30rpx;
			width: 100rpx;
			
			&_img{
				margin-left: 50%;
				transform: translate(-50%);
				width: 40rpx;
				height: 40rpx;
			}
			&_text{
				height: 60rpx;
				font-family: Alibaba PuHuiTi;
				font-weight: 500;
				font-size: 36rpx;
				color: #FFFFFF;
				line-height: 60rpx;
				text-align: center;
			}
		}
	}
	
	.top_bg{
		margin-bottom: 30rpx;
		width: 750rpx;
		height: 126rpx;
		background: #CD2B46;
		text-align: center;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 36rpx;
		color: #FFFCFA;
		line-height: 126rpx;
	}
	
	.box{
		margin-top: 30rpx;
		width: 750rpx;
		background: #FFFFFF;
		overflow: hidden;
		
		.boxes{
			width: 750rpx;
			height: 127rpx;
			overflow: hidden;
			
			&_img{
				float: left;
				margin: 37rpx 29rpx 35rpx 30rpx;
				width: 55rpx;
				height: 55rpx;
			}
			&_l{
				float: left;
				width: 635rpx;
				height: 127rpx;
				border-bottom: 1rpx solid #E0E0E0;
				box-sizing: border-box;
				overflow: hidden;
				
				&_text{
					float: left;
					height: 127rpx;
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 34rpx;
					color: #000000;
					line-height: 127rpx;
				}
				&_img{
					float: right;
					margin: 40rpx 30rpx;
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
	}
</style>